import React, { FC, memo, ReactElement, useEffect, useRef } from 'react'
import { ITodo } from '../../../../types'

interface IProps {
  todoList?: ITodo[]
  addTodo: (todo: ITodo) => void
}
const Input: FC<IProps> = ({ addTodo }): ReactElement => {
  const inputRef = useRef<HTMLInputElement>(null)
  useEffect(() => {
    console.log('input')
  }, [])
  console.log('inputUpdate')
  const addItem = (): void => {
    const str: string = inputRef.current!.value.trim()
    if (str.length) {
      // const res = todoList.some((v) => v.content === str)
      // if (res) {
      //   alert('已存在')
      //   return
      // }

      const todo = {
        id: Date.now(),
        completed: false,
        content: str,
      }
      addTodo(todo)
      inputRef.current!.value = ''
    }
  }
  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={addItem}>增加</button>
    </>
  )
}
export default memo(Input)
